<template>
	<view>
		<view style="height: 160rpx;box-sizing:border-box; padding-top: 81rpx;border-bottom: 2rpx solid #F7F7F7;">
			<image src="/static/shequ/fh.png" @click="backTo()" style="margin: 0 260rpx 0 30rpx; width: 18rpx;height: 32rpx;" mode="aspectFit"></image>
			<text style="font-size: 32rpx;">我的账单</text>
		</view>
		<view style="width: 690rpx;height: 300rpx;background-color: #00C657;border-radius: 24rpx 24rpx 0 0;margin: 30rpx 30rpx 0;color: #fff;">
			<view style="display: flex;flex-direction: column;">
				<text style="font-size: 30rpx;margin: 46rpx 280rpx 30rpx;">我的资产</text>
				<text style="font-size: 48rpx;margin: 0 278rpx 40rpx;">56,300</text>
			</view>
			<view style="display: flex;justify-content: center;">
				<navigator url="/pages/bill/pay/pay">
					<button type="default" plain="true" style="color: #fff;border: 1rpx solid #fff;margin-right: 80rpx;">充值</button>
				</navigator>
				<navigator url="/pages/bill/tixian/tixian">
					<button type="default" plain="true" style="color: #fff;border: 1rpx solid #fff;">提现</button>
				</navigator>
			</view>
		</view>
		<view style="width: 690rpx;height: 115rpx;background-color: #F7F7F7;border-radius: 0 0 24rpx 24rpx;margin: 0 30rpx 30rpx;font-size: 24rpx;display: flex;align-items: center;padding: 0 20rpx;box-sizing: border-box;justify-content: space-between;">
			<view style="display: flex;align-items: center;width: 186rpx;height: 57rpx;border-radius: 28rpx;border: 2rpx solid #E5E5E5;justify-content: center;">
				<picker mode="date" :value="date" fields="month" :start="startDate" :end="endDate" @change="dateChange" >
					<view>{{ date }}</view>					
				</picker>
				<image src="/static/下@2x.png" style="width: 20rpx;height: 13rpx;" mode="aspectFit" @change="dateChange"></image>
			</view>
			<text>支出：¥1235.46</text>
			<text>收入：¥27778.47</text>
		</view>
		<view style="margin: 50rpx 40rpx;">
			<text style="font-size: 30rpx;">明细</text>
			<view style="font-size: 24rpx;margin-top: 34rpx; padding-bottom: 30rpx;border-bottom: 1rpx solid #E5E5E5;" v-for="(item, index) in 6" :key="index">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<text style="color: #1B1B1B;">分享奖励</text>
					<text style="font-size: 36rpx;color: #F61B00;">+12</text>
				</view>
				<view style="margin-top: 11rpx; color: #999;display: flex;justify-content: space-between;">
					<text>分享商品给好友</text>
					<text>05-12 15:30</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		// 设置日期
		const currentDate = this.getDate({
			format: 'yyyy-mm'
		});

		return {
			date: currentDate
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	methods: {
		// 选择日期
		dateChange(e) {
			this.date = e.target.value.slice(0, 7);
			console.log(this.date.slice(0, 7));
		},
		// 获取年月日信息
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			// day = day > 9 ? day : '0' + day;
			return `${year}-${month}`;
		}
	}
};
</script>

<style lang="scss">
button {
	width: 120rpx;
	height: 60rpx;
	border-radius: 10rpx;
	font-size: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
